<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload=function () {
            var divEle = document.querySelector('#div1');
            // console.log(divEle);
           /* console.log(divEle.firstChild);
            console.log(divEle.firstElementChild);
            console.log(divEle.lastElementChild);
            console.log(divEle.lastChild);
            console.log(divEle.childNodes);
            console.log(divEle.children);*/
          var span1Ele=document.querySelector('#span1')
            console.log(span1Ele.parentNode);
            console.log(span1Ele.nextElementSibling);
            console.log(span1Ele.nextSibling);
           var span3Ele = document.querySelector('#span3');
            console.log(span3Ele.previousSibling);
            console.log(span3Ele.previousElementSibling);
        }

    </script>
</head>
<body>
    <div id="div1">
        <span id="span1">1</span>
        <span id="span2">2</span>
        <span id="span3">3</span>
    </div>
</body>
</html>